<template>
  <div class="main">
    <img :src="$store.state.appBg" class="bg1" alt>
    <div class="main-container">
      <hsktlist3 :groupDatas="groupDatas" :group="1"></hsktlist3>
    </div>

    <construction v-if="construction"
                  @close="closeConstruction"
    ></construction>

  </div>
</template>
<script>
  import scrollContainer from "@/components/base/scroll-container/scroll-container";
  import multiList from "@/components/base/multi-list/multi-list";
  import hsktlist3 from "@/components/tbkt/hskt-list-3";
  import construction from "@/components/construction";

  export default {
    name: "tbkt_wkt",
    components: {
      hsktlist3,
      scrollContainer,
      multiList,
      construction
    },
    data() {
      return {
        groups: [1],
        scrollY: 0,
        backObjName: "tbkt_wkt",
        hs: this.$store.state.hs,
        groupDatas: {
          dataArr: [
            {
              maxLine: 4,
              dynamic: false,
              title: "微课堂",
              data: []
            }
          ],
          focArr: [[]]
        },
        construction: false
      };
    },
    methods: {
      scroll(pos) {
        this.scrollY = pos.y;
        // console.log(pos);
      },
      scrollTo(targetIndex) {
        this.$refs.scrollContainer.scrollTo(targetIndex);
      },
      setBackObj(backObj) {
        this.hs.cookie.set(this.backObjName, JSON.stringify(backObj));
      },
      closeConstruction() {
        this.hs.initFocus("1-0");
        this.construction = false
      },
      getData() {
        let schoolId = this.$store.state.school.id
        // let schoolId = Object.keys(this.$store.state.user).length > 0 ? this.$store.state.user.clazz.grade.school.id : this.$store.state.school.id
        this.hs.ajax.get(
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/column/children?columnId=2" +
          "&schoolId=" +
          schoolId,
          data => {
            data = JSON.parse(data);
            //console.log.log(data);
            if (data.head.code === 1 && data.body.length > 0) {
              // -1  隐藏
              this.groupDatas.dataArr[0].data = data.body.filter((item) => {
                return item.style !== -1
              });
            }
          },
          0,
          function (msg) {

          }, 3000);
      }

    },
    created() {
      // 初始化hs
      this.$store.commit("initHs");
      this.getData();
    },
    mounted() {
      this.hs.initFocus("1-0");
      this.hs.addSelect(this.groups, (group, objid, objindex) => {
        if (group === 1) {
          this.setBackObj({backFocArr: [this.hs.focObj.objid]});
          this.$router.push(
            "/tbkt_wkt/wkt_dt/" +
            this.groupDatas.dataArr[0].data[objindex].id +
            "/" +
            encodeURIComponent(this.groupDatas.dataArr[0].data[objindex].name)
          );
        }
      });

      //  查看是否有记忆焦点
      if (this.hs.cookie.get(this.backObjName)) {
        let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
        let focArr = backObj.backFocArr;
        this.hs.cookie.delOne(this.backObjName);
        //console.log.log(JSON.stringify(focArr) + "**************");
        this.hs.initFocus(focArr[0]);
      }

      // 当学生所属学校id 和 当前学校不同时
      if (this.$store.getters.school.id !== this.$store.getters.user.clazz.grade.school.id) {
        this.construction = true
      }

    }
  };
</script>

<style scoped lang="less">
  .main {
    width: 1920px;
    height: 1080px;
    display: flex;
    .bg1 {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 1920px;
      height: 1080px;
      z-index: -1;
    }
    .main-container {
      margin-left: 264px;
      display: flex;
    }
  }
</style>
